<template>
	<view class="control">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(47, 117, 250, 0)"></QSNavbar>
		<view class="header">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e97b04390cc0b2a1f3830807ac38b0ac8014ee59.png" />
			<!-- <view class="info flex-between">
				<view class="flex-align">
					<view>
						<view class="info-name">李大奔</view>
						<view class="info-tel">13346488464</view>
					</view>
					<view class="flex-center select">
						<u--image width="25rpx" height="23rpx"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/1f888fe406b4b811491ca3e8b342612fe03b13ea.png" />
						<text>切换</text>
					</view>
				</view>
				<u--image shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg" width="90rpx" height="90rpx">
				</u--image>
			</view> -->
		</view>

		<view class="main">
			<u-tabs @click="changeTab" :list="tabList" lineWidth="50"
				:activeStyle="{color:'rgb(47,117,250)',fontWeight:700}"></u-tabs>
			<view class="con">
				<view class="list" v-show="tabActive === 0">
					<view class="item" v-for="item in 4" :key="item" @click="href">
						<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="33.5vw">
						</u--image>
						<view class="detail">
							<view class="detail-1 flex-align">
								<view class="tag">个人赛</view>
								<view>英雄联盟总决赛</view>
							</view>
							<view class="detail-2">
								<view style="float: left; width: 22%;height: 60rpx;background-color: #2f75fa1a;border-radius: 30rpx;">
									<image style="float: left;width: 60rpx; height: 60rpx;border-radius: 50%;" src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16594248632239150855.png" mode=""></image>
									<view  style="float: right;line-height: 60rpx;color: #333333;margin-right: 6rpx;">
										李商隐
									</view>
								</view>
								<view style="float: left;width: 50%;height: 60rpx;margin-left: 20rpx;margin-top: 15rpx;">
									开赛时间：7月1日-7月1日
								</view>
								
							</view>
							<view class="detail-3 flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9fd7a29f6b8ebf611ac78c59b6f6af9b9144a385.png">
								</image>
								<text>大连体育馆第一用词</text>
							</view>
							<!-- <navigator :url="`/pages/personal/qrcode/qrcode?id=${item.id}&title=我的场地&choose=选择场地`" -->
							<navigator 
								style="width: 100rpx; height: 100rpx;margin-top: -105rpx;float: right;">
								<view class="qrcode" style="margin-left: 50rpx;margin-top: 50rpx;">
									<u-image :src="`${assetsPath}fdacef21716adb6bb50e280a9351814e2327e9fd.png`" width="52rpx"
										height="52rpx"></u-image>
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view class="list" v-show="tabActive === 1">
					<view class="item" v-for="item in 1" :key="item">
						<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" width="100%" height="33.5vw">
						</u--image>
						<view class="detail">
							<view class="detail-1 flex-align">
								<view class="tag">个人赛</view>
								<view>英雄联盟总决赛</view>
							</view>
							<view class="detail-2">
								开赛时间：7月1日-7月1日
							</view>
							<view class="detail-3 flex-align">
								<image mode="aspectFit"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9fd7a29f6b8ebf611ac78c59b6f6af9b9144a385.png">
								</image>
								<text>大连体育馆第一用词</text>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	export default {
		components: {
			QSNavbar,
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '我的赛包',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				tabActive: 0,
				tabList: [{
						name: '已报名'
					},
					{
						name: '已结束'
					}
				],
			}
		},
		methods: {
			changeTab(data) {
				this.tabActive = data.index
			},
			href(){
				uni.navigateTo({
					url:'/pages/personal/my-event/event-detail/event-detail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		/deep/ .QS-navbar {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 5;
		}

		.header {
			position: relative;

			>image {
				width: 100%;
			}

			.info {
				width: 100%;
				height: 100%;
				position: absolute;
				top: -5%;
				padding: 0px 30rpx;
				left: 0;

				.info-name {
					color: rgb(234, 248, 248);
					font-size: 36rpx;
					font-weight: 700;
				}

				.info-tel {
					margin-top: 19rpx;
					color: rgb(234, 248, 248);
					font-size: 26rpx;
					font-weight: 500;
				}

				.select {
					margin-left: 19rpx;
					width: 100rpx;
					height: 100rpx;
					color: rgb(234, 248, 248);
					font-size: 24rpx;
					font-weight: 500;
					background: rgba(40, 40, 40, 0.2);
					border-radius: 50%;
					flex-direction: column;

					text {
						margin-top: 10rpx;
					}
				}
			}
		}

		.main {
			width: 100%;
			flex: 1;
			height: 0;
			margin-top: -360rpx;
			position: relative;
			display: flex;
			flex-direction: column;

			/deep/.u-tabs__wrapper__scroll-view {
				// border-radius: 30rpx 30rpx 0px 0px;
				background-color: white;

				.u-tabs__wrapper__nav__item {
					flex: 1;
				}
			}

			.con {
				padding: 30rpx 30rpx 0rpx;
				background-color: rgb(243, 243, 243);
				border-radius: 0px 0px 30rpx 30rpx;
				overflow: auto;
				flex: 1;

				.list {
					.item {
						margin-bottom: 30rpx;
						border-radius: 5rpx;
						overflow: hidden;

						.detail {
							background-color: #ffffff;
							padding: 20rpx;
							// background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/fdacef21716adb6bb50e280a9351814e2327e9fd.png");
							background-size: 52rpx 52rpx;
							background-position: calc(100% - 20rpx) calc(100% - 20rpx);
							background-repeat: no-repeat;

							.detail-1 {
								color: #333333;
								font-size: 28rpx;
								font-weight: 500;

								.tag {
									color: #ffffff;
									font-size: 22rpx;
									font-weight: 500;
									white-space: nowrap;
									padding: 3rpx 5rpx;
									margin-right: 10rpx;
									background-color: #3076fa;
									border-radius: 5rpx;
								}
							}

							.detail-2 {
								width: 100%;
								height: 70rpx;
								margin-top: 17rpx;
								color: #bebebe;
								font-size: 22rpx;
								font-weight: 500;
							}

							.detail-3 {
								color: #999999;
								font-size: 22rpx;
								margin-top: 20rpx;

								image {
									width: 27rpx;
									height: 31rpx;
									margin-right: 13rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
